<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/gou.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/new_file.css" />
  </head>

  <body>
    <div class="gou_bar">
      <div class="inner">
        <a href="index.php"><img src="img/logo.png" /></a>
        <ul class="bar_ul">
          <li>我的购物车</li>
          <li>确认订单信息</li>
          <li>等待付款</li>
          <li>订单执行</li>
        </ul>
      </div>
    </div>

    <div class="shopping">
      <h4>保税区</h4>

      <table id="cartTable">
        <thead>
          <tr>
            <th>
              <label
                ><input
                  class="check-all check"
                  type="checkbox"
                />&nbsp;全选</label
              >
            </th>
            <th>商品信息</th>
            <th>商品单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="checkbox">
              <input class="check-one check" type="checkbox" />
            </td>
            <td class="goods">
              <img src="img/images/20150708112148lm2t0.jpg" alt="" /><span
                >飞利浦新安怡卡通企鹅杯学饮杯7安士200ml 训练水杯
                防漏带手柄（2件装）</span
              >
            </td>
            <td class="price">60</td>
            <td class="count">
              <span class="reduce">-</span
              ><input class="count-input" type="text" value="1" /><span
                class="add"
                >+</span
              >
            </td>
            <td class="subtotal">60</td>
            <td class="operation"><span class="delete">删除</span></td>
          </tr>
          <tr>
            <td class="checkbox">
              <input class="check-one check" type="checkbox" />
            </td>
            <td class="goods">
              <img src="img/images/201509091748430829.jpg" alt="" /><span
                >日本Merries花王新生儿纸尿裤S82</span
              >
            </td>
            <td class="price">388</td>
            <td class="count">
              <span class="reduce">-</span
              ><input class="count-input" type="text" value="1" /><span
                class="add"
                >+</span
              >
            </td>
            <td class="subtotal">388</td>
            <td class="operation"><span class="delete">删除</span></td>
          </tr>
          <tr>
            <td class="checkbox">
              <input class="check-one check" type="checkbox" />
            </td>
            <td class="goods">
              <img src="img/images/3.jpg" alt="" /><span
                >Sony/索尼 DSC-WX300</span
              >
            </td>
            <td class="price">1428.50</td>
            <td class="count">
              <span class="reduce">-</span
              ><input class="count-input" type="text" value="1" /><span
                class="add"
                >+</span
              >
            </td>
            <td class="subtotal">1428.50</td>
            <td class="operation"><span class="delete">删除</span></td>
          </tr>
          <tr>
            <td class="checkbox">
              <input class="check-one check" type="checkbox" />
            </td>
            <td class="goods">
              <img src="img/images/201608081427026196.jpg" alt="" /><span
                >韩国MOMMA手工陶瓷奶瓶（220ml,320ml）+保温夜光喂奶灯套装
                多款颜色图案随机发货
              </span>
            </td>
            <td class="price">640.60</td>
            <td class="count">
              <span class="reduce">-</span
              ><input class="count-input" type="text" value="1" /><span
                class="add"
                >+</span
              >
            </td>
            <td class="subtotal">640.60</td>
            <td class="operation"><span class="delete">删除</span></td>
          </tr>
        </tbody>
      </table>
      <div class="foot" id="foot">
        <label class="fl select-all"
          ><input type="checkbox" class="check-all check" />&nbsp;全选</label
        >
        <a class="fl delete" id="deleteAll" href="javascript:;">删除</a>

        <div class="fr closing">立即购买</div>
        <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
        <div class="fr selected" id="selected">
          已选商品<span id="selectedTotal">0</span>件<span class="arrow up"
            >︽</span
          ><span class="arrow down">︾</span>
        </div>
        <div class="selected-view">
          <div id="selectedViewList" class="clearfix"></div>
          <span class="arrow">◆<span>◆</span></span>
        </div>
      </div>
    </div>

    <script>
      //   var input = document.querySelectorAll(".checkbox");
      var checkEle = document.querySelectorAll(".check-all.check");

      var checkone = document.querySelectorAll(".check-one");
      //   checkEle.forEach(function (num, k) {
      //     num.onclick = function () {
      //       if (num.checked) {
      //         checkone.forEach(function (item, key) {
      //           item.checked = true;
      //         });
      //       } else {
      //         checkone.forEach(function (item, key) {
      //           item.checked = false;
      //         });
      //       }
      //     };
      //   });
      //全选与不选
      checkEle[0].onclick = function () {
        for (let i = 0; i < checkone.length; i++) {
          if (checkone[i].checked == false) checkone[i].checked = true;
          else {
            checkone[i].checked = false;
          }
        }
      };
      checkEle[1].onclick = function () {
        for (let i = 0; i < checkone.length; i++) {
          if (checkone[i].checked == false) checkone[i].checked = true;
          else {
            checkone[i].checked = false;
          }
        }
      };

      var addEle = document.querySelectorAll(".add");
      var reduceEle = document.querySelectorAll(".reduce");
      var countEle = document.querySelectorAll(".count-input");
      var numAll = document.getElementById("selectedTotal");
      var money = document.querySelectorAll(".subtotal");
      addEle.forEach(function (item, key) {
        item.onclick = function () {
          var num = (item.previousElementSibling.value =
            parseInt(item.previousElementSibling.value) + 1);

          var price = parseInt(this.parentElement.previousElementSibling.value);
          item.parentElement.nextElementSibling.innerHTML =
            parseInt(item.parentElement.nextElementSibling.innerHTML) +
            parseInt(item.parentElement.previousElementSibling.innerHTML);
          countEle.innerHTML = `${Number(countEle[0].value)}+${Number(
            countEle[1].value
          )}+${Number(countEle[2].value)}+${Number(countEle[3].value)}+
                 `;
          moneyAll.innerHTML = `${
            Number(money[0].innerHTML) +
            Number(money[1].innerHTML) +
            Number(money[2].innerHTML) +
            Number(money[3].innerHTML)
          }`;
        };
      });
      reduceEle.forEach(function (item) {
        item.onclick = function () {
          if (parseInt(item.nextElementSibling.value) > 1) {
            item.nextElementSibling.value =
              parseInt(item.nextElementSibling.value) - 1;
            item.parentElement.nextElementSibling.innerHTML =
              parseInt(item.parentElement.nextElementSibling.innerHTML) -
              parseInt(item.parentElement.previousElementSibling.innerHTML);
            numAll.innerHTML = `${
              Number(countEle[0].value) +
              Number(countEle[1].value) +
              Number(countEle[2].value) +
              Number(countEle[3].value)
            }`;
            moneyAll.innerHTML = `${
              Number(money[0].innerHTML) +
              Number(money[1].innerHTML) +
              Number(money[2].innerHTML) +
              Number(money[3].innerHTML)
            }`;
          }
        };
      });
      numAll.innerHTML = `${
        Number(countEle[0].value) +
        Number(countEle[1].value) +
        Number(countEle[2].value) +
        Number(countEle[3].value)
      }`;

      var money = document.querySelectorAll(".subtotal");

      money.forEach(function (item, key) {
        item.innerHTML = `${Number(
          item.previousElementSibling.previousElementSibling.innerHTML
        )}`;
      });

      var moneyAll = document.getElementById("priceTotal");
      moneyAll.innerHTML = `${
        Number(money[0].innerHTML) +
        Number(money[1].innerHTML) +
        Number(money[2].innerHTML) +
        Number(money[3].innerHTML)
      }`;

      var deleteEle = document.querySelectorAll(".delete");

      for (i = 0; i < deleteEle.length; i++) {
        deleteEle[i].onclick = function () {
          this.parentElement.parentElement.remove();
        };
      }
      var deleteAll = document.getElementById("deleteAll");

      var trEles = document.querySelectorAll("tbody tr");
      deleteAll.onclick = function () {
        trEles.forEach(function (item) {
          var isChecked = item.querySelector(".check-one").checked;
          if (isChecked) {
            item.remove();
            // console.log(item);
          }
        });
      };
    </script>
  </body>
</html>
